<template>
  <div class="main-view__lottery-item__title">
    <div class="title">
      <slot />
      <span class="text-17px px-6px font-700">{{ title }}</span>
    </div>
    <div class="count text-12px">{{ $t("view_all") }}</div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const $t = key => {
  return t("home.lottery." + key);
};
defineProps<{
  title: string;
}>();
</script>

<style lang="less" scoped>
.main-view__lottery-item {
  &__title {
    color: white;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 12px;
    .title {
      display: flex;
      align-items: center;
      > img {
        margin-right: 6px;
        height: 20px;
        width: 20px;
      }
    }
    .count {
      color: var(--text-5);
    }
  }
}
</style>
